মৌলিক আকারগুলোর জন্য এট্রিবিউট এবং স্টাইলিং

এসভিজি (SVG) ফরম্যাটে বিভিন্ন মৌলিক আকার (যেমন, বৃত্ত, আয়তক্ষেত্র, রেখা, পাথ, ইত্যাদি) তৈরি করা হয় এবং এগুলোর জন্য বিশেষ এট্রিবিউট (attributes) এবং স্টাইলিং (styling) প্রদান করা হয়। এসভিজি চিত্রগুলো XML কোডে লেখা হয়, যার মাধ্যমে প্রতিটি উপাদান (এলিমেন্ট) নির্দিষ্ট আকার, রঙ, আচ্ছাদন, ইত্যাদি বৈশিষ্ট্য নির্ধারণ করা হয়।

মৌলিক আকার এবং তাদের এট্রিবিউট

এসভিজি ফরম্যাটে বিভিন্ন মৌলিক আকার তৈরি করতে কিছু সাধারণ এট্রিবিউট ব্যবহার করা হয়:

বৃত্ত (Circle)

বৃত্ত তৈরি করতে <circle> ট্যাগ ব্যবহার করা হয়। এর কয়েকটি সাধারণ এট্রিবিউট হলো:

• cx: বৃত্তের কেন্দ্রের অনুভূমিক স্থান।
• cy: বৃত্তের কেন্দ্রের উল্লম্ব স্থান।
• r: বৃত্তের ব্যাসার্ধ (radius)।
• fill: বৃত্তের রঙ।
• stroke: বৃত্তের আউটলাইন (বর্ডার) রঙ।
• stroke-width: বর্ডারের প্রস্থ।

উদাহরণ:

<circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="2" />

আয়তক্ষেত্র (Rectangle)

আয়তক্ষেত্র তৈরি করতে <rect> ট্যাগ ব্যবহার করা হয়। এর কয়েকটি সাধারণ এট্রিবিউট হলো:

• x: আয়তক্ষেত্রের বাম পাশের অনুভূমিক স্থান।
• y: আয়তক্ষেত্রের উপরের পাশের উল্লম্ব স্থান।
• width: আয়তক্ষেত্রের প্রস্থ।
• height: আয়তক্ষেত্রের উচ্চতা।
• fill: আয়তক্ষেত্রের রঙ।
• stroke: আউটলাইন রঙ।
• stroke-width: আউটলাইন প্রস্থ।

উদাহরণ:

<rect x="10" y="10" width="100" height="50" fill="red" stroke="black" stroke-width="2" />

রেখা (Line)

রেখা তৈরি করতে <line> ট্যাগ ব্যবহার করা হয়। এর কয়েকটি সাধারণ এট্রিবিউট হলো:

• x1: রেখার শুরু পয়েন্টের অনুভূমিক স্থান।
• y1: রেখার শুরু পয়েন্টের উল্লম্ব স্থান।
• x2: রেখার শেষ পয়েন্টের অনুভূমিক স্থান।
• y2: রেখার শেষ পয়েন্টের উল্লম্ব স্থান।
• stroke: রেখার রঙ।
• stroke-width: রেখার প্রস্থ।

উদাহরণ:

<line x1="10" y1="10" x2="100" y2="100" stroke="green" stroke-width="2" />

পাথ (Path)

পাথ ব্যবহার করে জটিল আকার বা ডিজাইন তৈরি করা যায়। এটি অনেক বেশি নমনীয় এবং বিস্তারিত নিয়ন্ত্রণ প্রদান করে। <path> ট্যাগ ব্যবহার করে পাথ তৈরি করা হয়, যার মধ্যে বিভিন্ন এট্রিবিউট এবং কমান্ড থাকে।

• d: পাথের ডেটা, যেখানে বিভিন্ন কমান্ড যেমন "M" (move), "L" (line), "C" (curve) ইত্যাদি ব্যবহার করা হয়।
• fill: পাথের ভেতরের রঙ।
• stroke: পাথের বর্ডার রঙ।
• stroke-width: পাথের বর্ডারের প্রস্থ।

উদাহরণ:

<path d="M10 10 H 90 V 90 H 10 Z" fill="none" stroke="purple" stroke-width="4" />

এসভিজি স্টাইলিং

এসভিজি উপাদানগুলোর স্টাইলিং করার জন্য দুটি প্রধান পদ্ধতি আছে:

Inline স্টাইলিং

এসভিজি উপাদানগুলোর জন্য সরাসরি style অ্যাট্রিবিউট ব্যবহার করা যায়, যা CSS (Cascading Style Sheets) এর মতো কাজ করে।

উদাহরণ:

<circle cx="50" cy="50" r="40" style="fill: blue; stroke: black; stroke-width: 2;" />

External বা Internal CSS

এসভিজি তে বাইরের CSS ফাইল বা ইনলাইন স্টাইল শীট ব্যবহার করা যায়। এই পদ্ধতিতে স্টাইলগুলি একটি আলাদা ব্লকে বা ফাইলে সংজ্ঞায়িত করা হয় এবং এসভিজি উপাদানে তা রেফারেন্স করা হয়।

উদাহরণ:

<style>
  .mycircle {
    fill: blue;
    stroke: black;
    stroke-width: 2;
  }
</style>

<circle cx="50" cy="50" r="40" class="mycircle" />

সারাংশ

এসভিজি চিত্র তৈরির জন্য বিভিন্ন মৌলিক আকার যেমন বৃত্ত, আয়তক্ষেত্র, রেখা, এবং পাথ ব্যবহার করা হয়, এবং এগুলোর জন্য বিভিন্ন এট্রিবিউট ও স্টাইলিং অপশন দেওয়া হয়। এগুলোর মাধ্যমে গ্রাফিক্সের আকার, রঙ, বর্ডার, এবং অন্যান্য বৈশিষ্ট্য নিয়ন্ত্রণ করা যায়। এসভিজি ফাইলের মাধ্যমে ইন্টারেক্টিভ এবং স্কেলযোগ্য গ্রাফিক্স তৈরি করা সম্ভব, যা ওয়েব ডেভেলপমেন্টে অত্যন্ত কার্যকরী।